<template>
	<view class="all_order">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">全部订单</view>
			</template>
		</uv-navbar>
		<scroll-view scroll-x class="scroll_box">
			<view class="item" :class="active==index?'active':''" v-for="(item,index) in tabs" @click="change(index)">
				<text>{{item}}</text>
				<image src="@/static/images/m18.png"></image>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list" @click="router(`/pages/my/order_deta?id=${item.id}`)">
					<view class="head">
						<view class="left">订单{{item.order_no}}</view>
						<view class="right">
							<!-- <view class="label">
								<view class="status">等待付款</view>
								<view class="time">29分钟</view>
							</view> -->
							<!-- <view class="status_text normal">待发货</view> -->
							<view class="status_text cancel">{{item.status_name}}</view>
						</view>
					</view>
					<view class="logistics" v-if="item.logistics">
						<view class="status">
							<image src="@/static/images/m19.png"></image>
							<text>仓库处理中</text>
						</view>
						<view class="deta">
							<view class="left">
								<text>您的订单已拣货完成，待出库交付顺丰快递，运单号为</text>
								<text class="order_no">SF1242524312</text>
							</view>
							<image src="@/static/images/r2.png"></image>
						</view>
						<view class="time">2021-08-11 19:11:06</view>
					</view>
					<view class="item_view" v-for="dataItem in item.product">
						<image :src="dataItem.product_img"></image>
						<view class="name_view">
							<view class="name">{{dataItem.product_name}}</view>
							<view class="code" @click.stop="preview(dataItem.order_no)" v-if="dataItem.writeoff>0">
								<image src="@/static/images/code.png"></image>
							</view>
						</view>
						<view class="other">
							<view class="price">
								<view class="unit">￥</view>
								<view class="value">{{item.total}}</view>
							</view>
							<view class="total">共{{dataItem.number}}件</view>
						</view>
					</view>
					<view class="btn_view">
						<view v-if="active==0" @click.stop="router(`/pages/my/order_deta?id=${item.id}`)">去支付</view>
						<view v-if="active==0" @click.stop="cancel(item.id)">取消订单</view>
						<view @click.stop="confirm_order(item.id)" v-if="active==2">确认收货</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
		<uv-popup ref="popup" mode="bottom" round="10">
			<CancelOrder :id="order_id" @close="reLoad" />
		</uv-popup>

		<uv-popup ref="codeRef" round="10">
			<view class="code_view">
				<uv-qrcode ref="qrcode" size="300px" :value="code_value"></uv-qrcode>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		orderLists,
		orderComplete
	} from "@/request/api";
	import CancelOrder from "@/components/my/CancelOrder.vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";
	const tabs = ref([]);
	const active = ref(0);
	const getList = async () => {
		let {
			list
		} = await orderLists({
			status: active.value,
			page: _this.page,
			limit: _this.limit
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	const change = (value) => {
		_this.page = 1;
		_this.list = [];
		active.value = value;
		getList();
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};

	const order_id = ref("");
	const popup = shallowRef();
	const cancel = (id) => {
		order_id.value = id;
		popup.value.open();
	};
	const reLoad = () => {
		popup.value.close();
		_this.page = 1;
		getList();
	};

	const confirm_order = async (id) => {
		await orderComplete({
			id
		});
		uni.$uv.toast("操作成功");
	};
	onLoad(async (options) => {
		let {
			status
		} = await orderLists({
			page: 1,
			limit: 1
		});
		tabs.value = status;
		let keys = Object.keys(status);
		active.value = options.type;
		// active.value = keys.length ? keys[0] : '';
		getList();
	});

	const code_value = ref("");
	const codeRef = shallowRef();
	const preview = (value) => {
		code_value.value = value;
		codeRef.value.open();
	};
</script>

<style scoped lang="scss">
	.all_order {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background: #f5f5f5;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.scroll_box {
			padding-left: 40rpx;
			box-sizing: border-box;
			background: #CA1C1D;
			white-space: nowrap;

			.item {
				display: inline-block;
				height: 64rpx;
				line-height: 64rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				margin-right: 52rpx;
				position: relative;

				&.active {
					color: #FFFFFF;
					font-size: 38rpx;
					font-weight: bold;

					image {
						display: inline-block;
					}
				}

				image {
					display: none;
					width: 16rpx;
					height: 15rpx;
					position: absolute;
					right: -8rpx;
					bottom: 0;
					z-index: 2;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 64rpx);
			background-color: #f5f5f5;

			.list {
				padding: 20rpx 22rpx;
				box-sizing: border-box;

				.item {
					border-radius: 20rpx;
					margin-bottom: 22rpx;
					padding: 30rpx 20rpx 35rpx 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;

					.head {
						height: 54rpx;
						padding-bottom: 20rpx;
						box-sizing: content-box;
						display: flex;
						justify-content: space-between;

						.left {
							color: #222222;
							font-size: 30rpx;
							font-weight: bold;
						}

						.right {
							display: flex;
							align-items: center;

							.label {
								height: 38rpx;
								border-radius: 19rpx;
								background: #FFD7D5;
								overflow: hidden;
								display: flex;

								.status {
									width: 120rpx;
									line-height: 38rpx;
									text-align: center;
									color: #F6F6F6;
									font-size: 24rpx;
									background: #CA1C1D;
								}

								.time {
									min-width: 120rpx;
									line-height: 38rpx;
									text-align: center;
									color: #CA1C1D;
									font-size: 24rpx;
									font-weight: bold;
									background: #FFD7D5;
								}
							}

							.status_text {
								&.normal {
									color: #999999;
									font-size: 24rpx;
								}

								&.cancel {
									color: #CA1C1D;
									font-size: 24rpx;
									font-weight: bold;
								}
							}
						}
					}

					.logistics {
						border-radius: 12rpx;
						padding: 24rpx 12rpx;
						box-sizing: border-box;
						background: #F9F9F9;

						.status {
							display: flex;
							align-items: center;

							image {
								width: 44rpx;
								height: 44rpx;
							}

							text {
								color: #333333;
								font-size: 28rpx;
								font-weight: bold;
								padding-left: 8rpx;
								box-sizing: border-box;
							}
						}

						.deta {
							padding: 18rpx 0;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								line-height: 37rpx;
								color: #666666;
								font-size: 26rpx;
								padding-right: 50rpx;
								box-sizing: border-box;

								.order_no {
									color: #5E8EEE;
								}
							}

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.time {
							color: #666666;
							font-size: 24rpx;
						}
					}

					.item_view {
						padding: 25rpx 0;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 168rpx;
							height: 168rpx;
							border-radius: 14rpx;
							background: #666666;
						}

						.name_view {
							flex: 1;
							display: flex;
							align-items: flex-start;
							padding: 0 20rpx;
							box-sizing: border-box;

							.name {
								flex: 1;
								line-height: 36rpx;
								color: #333333;
								font-size: 28rpx;
								font-weight: bold;
								padding: 0 18rpx;
								box-sizing: border-box;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.code {
								image {
									width: 80rpx;
									height: 80rpx;
								}
							}
						}

						.other {
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							.price {
								display: flex;

								.unit {
									color: #272727;
									font-size: 22rpx;
									font-weight: bold;
								}

								.value {
									color: #272727;
									font-size: 32rpx;
									font-weight: bold;

								}
							}

							.total {
								color: #999999;
								font-size: 24rpx;
								padding-top: 14rpx;
								box-sizing: border-box;
							}
						}
					}

					.btn_view {
						display: flex;
						justify-content: flex-end;

						view {
							width: 140rpx;
							height: 58rpx;
							line-height: 58rpx;
							color: #222222;
							font-size: 24rpx;
							text-align: center;
							border-radius: 29rpx;
							border: 1px solid #767676;
							margin-left: 26rpx;

							&:last-child {
								color: #CA1C1D;
								border: 1px solid #CA1C1D;
							}
						}
					}
				}
			}
		}

		.code_view {
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
</style>